<template>
  <section class="page">
    <data-form :model="model" @onSearch="refreshData" :page="pageService">
      <template slot="default-input">
        <el-form-item label="时间" prop="operatorTime">
          <el-date-picker v-model="model.operatorTime" type="daterange" range-separator="~" start-placeholde="开始时间" end-placeholde="结束时间" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="操作账户" prop="operatorName">
          <el-input v-model="model.operatorName"></el-input>
        </el-form-item>
        <el-form-item label="操作人" prop="operatorRealName">
          <el-input v-model="model.operatorRealName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="model.status" placeholder="请选择">
            <el-option v-for="item of $dict.getDict('SuccessOrFailure')" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="columns">
        <el-table-column prop="requestURL" label="请求接口" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="requestMethod" label="请求类型" :min-width="$helper.getColumnWidth(2)">
        </el-table-column>
        <el-table-column prop="signature" label="方法签名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="description" label="描述" :min-width="$helper.getColumnWidth(6)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="executeTime" label="耗时(ms)" :min-width="$helper.getColumnWidth(2)">
        </el-table-column>
        <el-table-column prop="status" label="状态" :min-width="$helper.getColumnWidth(1)">
          <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.status === 'FAILURE'" @click="detailsId = scope.row.detailsId, isOpenDetails = true">
              {{$dict.dictConvert('SuccessOrFailure', scope.row.status)}}
            </el-button>
            <span v-else>{{$dict.dictConvert('SuccessOrFailure', scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operatorTime" label="操作时间" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="operatorName" label="操作账户" :min-width="$helper.getColumnWidth(2)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="operatorRealName" label="操作人名" :min-width="$helper.getColumnWidth(2)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>

    <!-- 查看日志详细信息 -->
    <el-dialog title="详细错误信息" :visible.sync="isOpenDetails" @open="$nextTick(() => $refs['operation-log-details'].refreshData())" fullscreen>
      <operation-log-details ref="operation-log-details" :detailsId="detailsId" @close="isOpenDetails = false"></operation-log-details>
    </el-dialog>

  </section>
</template>


<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/util/page.service";
import { OperationLogService } from '~/service/service-manage/operation-log.service';
import DataBox from "~/components/common/data-box.vue";
import DataForm from "~/components/common/data-form.vue";
import OperationLogDetails from '~/components/system-manage/operation-log/operation-log-details.vue'

@Layout("workspace")
@Component({
  components: {
    DataBox,
    DataForm,
    OperationLogDetails,
  }
})
export default class RoleManage extends Vue {
  @Dependencies(PageService) private pageService: PageService
  @Dependencies(OperationLogService) private operationLogService: OperationLogService

  // 角色数据
  private dataSet: Array<any> = []
  // 选中数据详细信息Id
  private detailsId: String = ''
  private isOpenDetails: boolean = false


  private model: any = {
    operatorTime: '',
    operatorName: '',
    operatorRealName: '',
    status: '',
  }

  private activated() {
    this.refreshData()
  }

  private refreshData() {
    const params: any = {
      operatorName: this.model.operatorName,
      operatorRealName: this.model.operatorRealName,
      status: this.model.status,
    }
    params.operatorTimeMin = this.model.operatorTime ? this.model.operatorTime[0] : ''
    params.operatorTimeMax = this.model.operatorTime ? this.model.operatorTime[1] : ''
    this.operationLogService.findOperationLogsByPage(params, this.pageService).subscribe(
      data => this.dataSet = data,
      error => this.$message.error(error.msg)
    )
  }
}
</script>
<style lang="less" scoped>
</style>


